<template>
  <el-card style="box-shadow: none;">
    <el-row>
      <el-tooltip class="item" effect="dark" content="返回" placement="right-start">
        <el-button type="text" @click="returnQuestionList" style="margin-left: 10px">
          <svg t="1708609271658" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="5331" width="30" height="30">
            <path d="M257.2 567.1h584.5c29 0 52.5-23.4 52.5-52.2V512c0-28.8-23.5-52.2-52.5-52.2H255.9L431 284.1c20.2-20.3 20.2-53 0-73.3l-0.4-0.4c-20.2-20.3-53.1-20.5-73.6-0.5l-0.5 0.5L71.8 496.1a26.013 26.013 0 0 0 0 36.7l55.7 55.9L352 813.8c20.4 20.5 53.7 20.6 74.3 0.4l0.4-0.4 1.7-1.7c20.3-20.3 20.3-53.1 0-73.4L257.2 567.1z" p-id="5332" fill="#515151"></path>
          </svg>
        </el-button>
      </el-tooltip>
      <h1 class="row__title" style="margin-left: 20px;margin-top: 3px; justify-content: center;">添加试题</h1>
    </el-row>

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm" style="margin-top: 10px">
        <el-form-item label="题库名：" prop="bankId">
          <el-select v-model="ruleForm.bankId" placeholder="请选择题库" clearable>
            <el-option
                v-for="item in bankList"
                :key="item.bankId"
                :label="item.bankName"
                :value="item.bankId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型：" prop="questionType">
          <el-radio-group v-model="ruleForm.questionType" @change="handleStatusChange">
            <el-radio-button :label= 1>单选题</el-radio-button>
            <el-radio-button :label= 2>多选题</el-radio-button>
            <el-radio-button :label= 3>判断正误题</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题目：" prop="questionText">
          <el-input v-model="ruleForm.questionText" placeholder="请输入题目内容"></el-input>
        </el-form-item>
        <el-form-item label="选项 A：" prop="optionA" v-show="ruleForm.questionType==1||ruleForm.questionType==2">
          <el-input v-model="ruleForm.optionA" placeholder="请输入选项 A 内容"></el-input>
        </el-form-item>
        <el-form-item label="选项 B：" prop="optionB" v-show="ruleForm.questionType==1||ruleForm.questionType==2">
          <el-input v-model="ruleForm.optionB" placeholder="请输入选项 B 内容"></el-input>
        </el-form-item>
        <el-form-item label="选项 C：" prop="optionC" v-show="ruleForm.questionType==1||ruleForm.questionType==2">
          <el-input v-model="ruleForm.optionC" placeholder="请输入选项 C 内容"></el-input>
        </el-form-item>
        <el-form-item label="选项 D：" prop="optionD" v-show="ruleForm.questionType==1||ruleForm.questionType==2">
          <el-input v-model="ruleForm.optionD" placeholder="请输入选项 D 内容"></el-input>
        </el-form-item>
        <el-form-item label="答案：" prop="correctAnswer" v-show="ruleForm.questionType==1">
          <el-radio-group v-model="ruleForm.correctAnswer">
            <el-radio-button :label = 8>A</el-radio-button>
            <el-radio-button :label = 4>B</el-radio-button>
            <el-radio-button :label = 2>C</el-radio-button>
            <el-radio-button :label = 1>D</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="答案：" prop="correctAnswer" v-show="ruleForm.questionType==2">
          <el-checkbox-group v-model="checkboxGroup" size="medium">
            <el-checkbox-button v-for="option in options" :label="option.correctAnswer" :key="option">{{option.label}}</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="答案：" prop="correctAnswer" v-show="ruleForm.questionType==3">
          <el-radio-group v-model="ruleForm.correctAnswer">
            <el-radio-button :label = 8>正确</el-radio-button>
            <el-radio-button :label = 4>错误</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分值：" prop="score">
          <el-input-number v-model="ruleForm.score" :precision="2" :step="0.1" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveAdd">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
  </el-card>
</template>
<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default{
  name: "couponMonitor",
  data() {
    return{
      ruleForm: {
        bankId:'',
        questionType:1,
        questionText:'',
        optionA:'',
        optionB:'',
        optionC:'',
        optionD:'',
        correctAnswer:8,
        score:0
      },
      bankList:[],
      rules: {
        bankId: [
          { required: true},
        ],
        checkboxGroup: [
          { required: true},
        ],
        questionText: [
          { required: true, message: '请输入题目内容', trigger: 'blur' }
        ],
        optionA: [
          { required: true, message: '请输入选项 A 内容', trigger: 'blur' }
        ],
        optionB: [
          { required: true, message: '请输入选项 B 内容', trigger: 'blur' }
        ],
        optionC: [
          { required: true, message: '请输入选项 C 内容', trigger: 'blur' }
        ],
        optionD: [
          { required: true, message: '请输入选项 D 内容', trigger: 'blur' }
        ],
        questionType: [
          { required: true},
        ],
        correctAnswer: [
          { required: true},
        ],
        score: [
          { required: true},
        ],
      },

      options: [{correctAnswer: 8, label: 'A'}, {correctAnswer: 4, label: 'B'},
                {correctAnswer: 2, label: 'C'}, {correctAnswer: 1, label: 'D'}],
      checkboxGroup: [0],
    }

  },
  watch: {
    // 监听type变化
    'ruleForm.questionType': function(newVal, oldVal){
      if (newVal !==  oldVal) {
        this.resetInputForm();
      }
    },
  },
  methods: {
    returnQuestionList(){
      this.$router.push({path:'/quizManagement/QuestionManagement'})
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    resetInputForm() {
      this.ruleForm = {
        bankId:'',
        questionType:this.ruleForm.questionType,
        questionText:'',
        optionA:'',
        optionB:'',
        optionC:'',
        optionD:'',
        correctAnswer:8,
        score:0
      };
    },
    /*獲取題庫信息*/
    async getBankList() {
      try {
        const res = await axios.get('/questionBankManage/getBankList');

        console.log("getBankList返回值",res);

        if (res.status === 200) {
          this.bankList = res.data.data;
          console.log("companyList返回值",this.bankList);
        } else {
          ElMessage('获取题库数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取题库数据失败');
      }
    },
    //0.定義試題信息
    addQuestionsInfo(bankId,questionText,questionType,optionA,optionB,optionC,optionD,correctAnswer,score){
      return {
        "bankId":bankId,"questionText":questionText, "questionType": questionType, "optionA": optionA,
        "optionB":optionB, "optionC":optionC, "optionD": optionD,
        "correctAnswer": correctAnswer, "score": score
      };
    },
    async saveAdd(){
      let correctAnswer = 0;
      if(this.ruleForm.questionType==1){
        correctAnswer = this.ruleForm.correctAnswer;
      }else if(this.ruleForm.questionType==2){
        this.checkboxGroup.forEach(item => {
            correctAnswer += item; // 将有效的数字累加到总和中
        });
      }else if(this.ruleForm.questionType==3){
        correctAnswer = this.ruleForm.correctAnswer;
      }

      let addInfo = this.addQuestionsInfo(this.ruleForm.bankId,this.ruleForm.questionText,this.ruleForm.questionType,this.ruleForm.optionA,this.ruleForm.optionB,this.ruleForm.optionC,this.ruleForm.optionD,correctAnswer,this.ruleForm.score);

      console.log("addInfo數據：",addInfo);
      try {
        const res = await axios.post('/questionManage/addQuestion',addInfo);

        if (res.status === 200) {
          ElMessage({
            message: '试题添加成功',
            type: 'success',
          }),this.resetInputForm();
        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage({
            showClose: true,
            message: '试题添加失败',
            type: 'error',
          })
        }}catch (error) {
        ElMessage({
          showClose: true,
          message: '出错了',
          type: 'warning',
        })
      }
    },
  },
  mounted() {
    this.getBankList();
  }

}
</script>
<style scoped>

</style>